<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="tac">
        <el-col :span="23">
          <!-- 插入logo图片 -->
          <img src="../../public/logo.png" width="200px" height="60px" />
          <!-- 目录 -->
          <!-- 菜单 -->
          <!-- 封装 -->
          <nav-menu :menus="menus"></nav-menu>
        </el-col>
      </el-row>
    </el-aside>
  </el-container>
</template>

<script>
import NavMenu from "./nav/NavMenu.vue";
import routes from "../router/routes";

export default {
  // 局部注册
  components: { NavMenu },
  // 数据函数
  data() {
    return {
      fits: ["fill"],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 处理路由定义中的想要在菜单中隐藏的项-第二版
    routesToMenus(routes, path) {
      let arr = [];
      routes.forEach((item) => {
        // 判断当前元素是否需要在菜单中隐藏
        if (item.meta.hidden && item.meta.hidden === true) {
          // 当前元素有children节点，如果有则升格children节点，否则不做其它
          if (item.children && item.children.length > 0) {
            let tmpArr = this.routesToMenus(item.children, item.path);
            arr = arr.concat(tmpArr);
          }
        } else {
          // 这个路径的处理，必须在调用递归方法之前，才会保存最上一层的路径
          if (path) {
            if (path === "/") {
              item.path = path + item.path;
            } else {
              item.path = path + "/" + item.path;
            }
          }
          // 处理当有children节点的时候，递归调用自己
          if (item.children && item.children.length > 0) {
            // console.log(item.path);
            item.children = this.routesToMenus(item.children, item.path);
          }
          arr.push(item);
        }
      });
      // console.log(arr);
      return arr;
    },
    // 处理路由定义中的想要在菜单中隐藏的项-第一版
    processRoutes(routes) {
      /*  
        1、遍历定义的路由
        2、判断当前元素/节点是否需要隐藏，是的话，再判断它是否具有children节点，并且children节点有数据
        3、接上一步，将其children下的元素都往上提一层（升格）
        4、将其装入新的数组
      */
      let arr = [];
      routes.forEach((item) => {
        if (
          item.meta.hidden &&
          item.meta.hidden === true &&
          item.children &&
          item.children.length > 0
        ) {
          item.children.forEach((subItem) => {
            arr.push(subItem);
          });
        } else {
          if (!item.meta.hidden || item.meta.hidden === false) {
            arr.push(item);
          }
        }
      });
      return arr;
    },
  },
  computed: {
    menus: function () {
      // console.log(routes);
      let list = this.routesToMenus(routes, "");
      return list;
    },
  },
};
//   },
//   // 计算属性
//   computed: {
//     menus: function () {
//       /*
//       1、遍历路由的每一个元素或者节点
//       2、判断元素中的元信息中有没有hidden属性，并且值是不是为true，并且其具有children属性，并且长度大于0
//       3、接上一步，如果是则将children中的所有元素提升到当前节点的高度（升格）
//       4、否则直接将当前元素push到一个新数组当中
//       */
//       // console.log(routes);
//       let arr = [];
//       for (let i = 0; i < routes.length; i++) {
//         // console.log(routes[i].meta);
//         // 当前元素存在hidden属性，并且hidden值为true
//         if (routes[i].meta.hidden && routes[i].meta.hidden === true) {
//           // 判断当前元素存在children节点，并且其长度大于0
//           if (routes[i].children && routes[i].children.length > 0) {
//             // 循环
//             routes[i].children.forEach((subItem) => {
//               // 遍历childre中的元素，判断子元素不存在hidden属性，或者存在hidden属性，但其值为false
//               if (
//                 !Object.prototype.hasOwnProperty.call(subItem.meta, "hidden") ||
//                 subItem.meta.hidden === false
//               ) {
//                 arr.push(subItem);
//               }
//             });
//           }
//         } else {
//           arr.push(routes[i]);
//         }
//       }
//       return arr;
//     },
//   },
// };
</script>

<style>
.el-aside {
  overflow: hidden !important;
}
.el-col-23 {
  width: 100% !important;
}
</style>